<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate.css 所有动画</title>
<link rel="stylesheet" href="animate.css">
<style>
*{padding:0;margin:0 auto;}
.main{width:800px;}
.padding{padding:20px;}
.mtop{margin-top:20px;}
.ml{margin-left:15px;}
.border{border:1px solid #e8e8e8;}
p{line-height:45px;font-size:25px;color:#666;}
p:nth-child(2n){color:red;}
h1,h2{line-height:40px;font-size:20px;}
</style>

</head>
<div class="border mtop main padding">
<h1>Animate.css 所有动画</h1>
<!--Animate.css总共有14组动画，包括5对动画，4组单一的动画-->
<!--Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。-->
<h2 class="mtop">第1组-弹跳</h2>
<p class="animated bounce bounce">animated bounce bounce <span class="ml">弹跳</span></p>
<p class="animated bounce flash">animated bounce flash<span class="ml">反射闪光</span></p>
<p class="animated bounce pulse">animated bounce pulse<span class="ml">反弹脉冲 </span></p>
<p class="animated bounce rubberBand">animated bounce rubberBand<span class="ml">跳橡皮筋 </span></p>
<p class="animated bounce shake">animated bounce shake<span class="ml">弹抖 </span></p>
<p class="animated bounce swing">animated bounce swing<span class="ml">弹跳摆动 </span></p>
<p class="animated bounce tada">animated bounce tada<span class="ml">弹跳多田 </span></p>
<p class="animated bounce wobble">animated bounce wobble<span class="ml">弹跳抖动 </span></p>
<p class="animated bounce jello">animated bounce jello<span class="ml">弹跳果冻</span></p>
<h2 class="mtop">第2组-弹入</h2>

<p class="animated bounce bounceIn">animated bounce bounceIn<span class="ml">本地反弹</span></p>
<p class="animated bounce bounceInDown">animated bounce bounceInDown<span class="ml">从上往下进入反弹</span></p>
<p class="animated bounce bounceInLeft">animated bounce bounceInLeft<span class="ml">从左进入反弹 </span></p>
<p class="animated bounce bounceInRight">animated bounce bounceInRight<span class="ml">从右进入反弹 </span></p>
<p class="animated bounce bounceInUp">animated bounce bounceInUp<span class="ml">从下往上进入反弹 </span></p>
<h2 class="mtop">第3组-弹出</h2>
<p class="animated bounce bounceOut">animated bounce bounceOut<span class="ml">本地弹出</span></p>
<p class="animated bounce bounceOutDown">animated bounce bounceOutDown<span class="ml">往下弹出</span></p>
<p class="animated bounce bounceOutLeft">animated bounce bounceOutLeft<span class="ml">往左弹出</span></p>
<p class="animated bounce bounceOutRight">animated bounce bounceOutRight<span class="ml">往右弹出</span></p>
<p class="animated bounce bounceOutUp">animated bounce bounceOutUp<span class="ml"></span>往上弹出</p>

<h2 class="mtop">第4组-淡入</h2>

<p class="animated bounce fadeIn">animated bounce fadeIn<span class="ml">本地渐显</span></p>
<p class="animated bounce fadeInDown">animated bounce fadeInDown<span class="ml">本地从上往下渐显</span></p>
<p class="animated bounce fadeInDownBig">animated bounce fadeInDownBig<span class="ml">从上往下淡入</span></p>
<p class="animated bounce fadeInLeft">animated bounce fadeInLeft<span class="ml">从左淡入</span></p>
<p class="animated bounce fadeInLeftBig">animated bounce fadeInLeftBig<span class="ml">从左从小到大淡入</span></p>
<p class="animated bounce fadeInRight">animated bounce fadeInRight<span class="ml">从右淡入</span></p>
<p class="animated bounce fadeInRightBig">animated bounce fadeInRightBig<span class="ml">从右从小到大淡入</span></p>
<p class="animated bounce fadeInUp">animated bounce fadeInUp<span class="ml">本地从下往上渐显</span></p>
<p class="animated bounce fadeInUpBig">animated bounce fadeInUpBig<span class="ml">本地从下往上从小变大渐显</span></p>
<h2 class="mtop">第5组-淡出</h2>

<p class="animated bounce fadeOut">animated bounce fadeOut<span class="ml">本地淡出</span></p>
<p class="animated bounce fadeOutDown">animated bounce fadeOutDown<span class="ml">本地从上往下淡出</span></p>
<p class="animated bounce fadeOutDownBig">animated bounce fadeOutDownBig<span class="ml">从上往下淡出</span></p>
<p class="animated bounce fadeOutLeft">animated bounce fadeOutLeft<span class="ml">从左淡出</span></p>
<p class="animated bounce fadeOutLeftBig">animated bounce fadeOutLeftBig<span class="ml">从左从小到大淡出</span></p>
<p class="animated bounce fadeOutRight">animated bounce fadeOutRight<span class="ml">从右淡出</span></p>
<p class="animated bounce fadeOutRightBig">animated bounce fadeOutRightBig<span class="ml">从右从小到大淡出</span></p>
<p class="animated bounce fadeOutUp">animated bounce fadeOutUp<span class="ml">本地从下往上渐隐</span></p>
<p class="animated bounce fadeOutUpBig">animated bounce fadeOutUpBig<span class="ml">本地从下往上从小变大渐隐</span></p>

<h2 class="mtop">第6组-翻转</h2>
<p class="animated bounce flip">animated bounce flip<span class="ml">本地翻转</span></p>
<p class="animated bounce flipInX">animated bounce flipInX<span class="ml">沿x轴翻转</span></p>
<p class="animated bounce flipInY">animated bounce flipInY<span class="ml">沿y轴翻转</span></p>
<p class="animated bounce flipOutX">animated bounce flipOutX<span class="ml">沿x轴翻转淡出</span></p>
<p class="animated bounce flipOutY">animated bounce flipOutY<span class="ml">沿y轴翻转淡出</span></p>
<h2 class="mtop">第7组&nbsp;&nbsp;光速进入进出</h2>
<p class="animated bounce lightSpeedIn">animated bounce lightSpeedIn<span class="ml">右边光速进入</span></p>
<p class="animated bounce lightSpeedOut">animated bounce lightSpeedOut<span class="ml">右边光速淡出</span></p>
<h2 class="mtop">第8组&nbsp;&nbsp;旋转进入</h2>
<p class="animated bounce rotateIn">animated bounce rotateIn<span class="ml">旋转进入</span></p>
<p class="animated bounce rotateInDownLeft">animated bounce rotateInDownLeft<span class="ml">左固定从上往下旋转进入</span></p>
<p class="animated bounce rotateInDownRight">animated bounce rotateInDownRight<span class="ml">本地从上往下进入</span></p>
<p class="animated bounce rotateInUpLeft">animated bounce rotateInUpLeft<span class="ml">左固定从下往上旋转进入</span></p>
<p class="animated bounce rotateInUpRight">animated bounce rotateInUpRight<span class="ml">从右边旋转从下往上进入</span></p>
<h2 class="mtop">第9组&nbsp;&nbsp;旋转移出</h2>
<p class="animated bounce rotateOut">animated bounce rotateOut<span class="ml">旋转移出</span></p>
<p class="animated bounce rotateOutDownLeft">animated bounce rotateOutDownLeft<span class="ml">左固定从上往下旋转移出</span></p>
<p class="animated bounce rotateOutDownRight">animated bounce rotateOutDownRight<span class="ml">本地从上往下移出</span></p>
<p class="animated bounce rotateOutUpLeft">animated bounce rotateOutUpLeft<span class="ml">左固定从下往上旋转移出</span></p>
<p class="animated bounce rotateOutUpRight">animated bounce rotateOutUpRight<span class="ml">从右边旋转从下往上移出</span></p>

<h2 class="mtop">第10组&nbsp;&nbsp;滑入</h2>
<p class="animated bounce slideInUp">animated bounce slideInUp<span class="ml">本地从下往上滑入</span></p>
<p class="animated bounce slideInDown">animated bounce slideInDown<span class="ml">本地从上往下滑入</span></p>
<p class="animated bounce slideInLeft">animated bounce slideInLeft<span class="ml">从左滑入</span></p>
<p class="animated bounce slideInRight">animated bounce slideInRight<span class="ml">从右滑入</span></p>
<h2 class="mtop">第11组&nbsp;&nbsp;滑出</h2>
<p class="animated bounce slideOutUp">animated bounce slideOutUp<span class="ml">从下往上滑出</span></p>
<p class="animated bounce slideOutDown">animated bounce slideOutDown<span class="ml">从上往下滑出</span></p>
<p class="animated bounce slideOutLeft">animated bounce slideOutLeft<span class="ml">往左滑出</span></p>
<p class="animated bounce slideOutRight">animated bounce slideOutRight<span class="ml">往右滑出</span></p>
<h2 class="mtop">第12组&nbsp;&nbsp;放大</h2>
<p class="animated bounce zoomIn">animated bounce zoomIn<span class="ml">从下放大进入</span></p>
<p class="animated bounce zoomInDown">animated bounce zoomInDown<span class="ml">从上往下放大进入</span></p>
<p class="animated bounce zoomInLeft">animated bounce zoomInLeft<span class="ml">从左放大进入</span></p>
<p class="animated bounce zoomInRight">animated bounce zoomInRight<span class="ml">从右放大进入</span></p>
<p class="animated bounce zoomInUp">animated bounce zoomInUp<span class="ml">从下往上放大进入</span></p>
<h2 class="mtop">第13组-缩小</h2>
<p class="animated bounce zoomOut">animated bounce zoomOut<span class="ml">从下缩小进入 </span></p>
<p class="animated bounce zoomOutDown">animated bounce zoomOutDown<span class="ml"></span>从上往下缩小进入</p>
<p class="animated bounce zoomOutLeft">animated bounce zoomOutLeft<span class="ml">从左缩小进入</span></p>
<p class="animated bounce zoomOutRight">animated bounce zoomOutRight<span class="ml">从右缩小进入</span></p>
<p class="animated bounce zoomOutUp">animated bounce zoomOutUp<span class="ml">从下往上缩小进入</span></p>

<h2 class="mtop">第14组</h2>
<p class="animated bounce hinge">animated bounce hinge<span class="ml">反弹铰链 </span></p>
<p class="animated bounce jackInTheBox">animated bounce jackInTheBox<span class="ml">玩偶 </span></p>
<p class="animated bounce rollIn">animated bounce rollIn<span class="ml">弹跳滚动进入</span></p>
<p class="animated bounce rollOut">animated bounce rollOut<span class="ml">弹跳滚动移出</span></p>
</div>

</body>
</html>